<template>
  <div class="box">
      <div class="search">
          <span class="iconfont iconjiantou" @click="pack"></span>
          <div class="one">
              <span class="iconfont iconsearch"></span>
              <input type="text" v-model="inputval">
          </div>
          <div class="txt" @click="search">
              搜索
          </div>
      </div>
      <div class="sea" v-if="data.length == 0 && inputval == ''">
          <div class="text"><span>历史记录</span> <samp @click="clear">清除搜索历史</samp></div>
          <span v-for="item in record" :key="item.index" @click="reco(item.name)">{{item.name}}</span>
      </div>

      
    <div class="rec" v-for="item in recommend" :key="item.id" @click="$router.push('/postdetail/'+ item.id)">
        <div class="recommend">{{item.title}}</div> <span class="iconfont iconjiantou1"></span>
    </div>
      

    <post v-for="item in data" :key="item.id" :inntxt=item />
  </div>
</template>

<script>
import post from '../../components/inModule/innarticle'
export default {
    components:{
        post,
    },
    data(){
        return{
            inputval:'',
            data:'', 
            recommend:'',  //搜索推荐
            record:[
                {
                    name:"张学友"
                },
                {
                    name:'华为'
                }
            ]
        }
    },
    created(){
        
        this.localStorage()  //获取本地储存记录
    },
    watch:{
        inputval(){  //输入框变化是发送推荐请求
            this.data = ''  
            this.$axios({
                url:'/post_search_recommend',
                params:{
                    keyword:this.inputval
                }
            }).then(res=>{
                console.log("推荐内容");
                console.log(res);
                this.recommend = res.data.data
            })
        }
    },
    methods:{
        search(){  //点击搜索
            if(this.inputval == ""){
                return
            }

            this.$axios({
                url:'/post_search',
                params:{
                    keyword:this.inputval
                }
            }).then(res=>{
                console.log(res);
                this.data = res.data.data
                console.log(this.data);
                this.recommend = ''  //清空监听inputval函数变量

                //存到到本地
                let searchdata = localStorage.getItem('LocalRecords') || '[]'
                let data = JSON.parse(searchdata)
                let da = []
                for(let i=0;i < data.length; i++){
                    console.log(data[i].name);
                    da.push(data[i].name) 
                }
                console.log(da);
                if(da.indexOf(this.inputval) == -1){
                    data.unshift({
                        name:this.inputval
                    })
                    localStorage.setItem('LocalRecords',JSON.stringify(data))
                }
            })
        },

        localStorage(){  //获取本地储存历史记录
            let res = localStorage.getItem('LocalRecords') || '[]'
        
            console.log("获取本地储存的记录" + JSON.parse(res));
            this.record = JSON.parse(res)
        },
        pack(){  //箭头事件
            if(this.data.length >= 1){
                this.data = ''
                this.inputval = '' 
                this.localStorage()  //获取本地储存记录
            }else{
                this.$router.push('/')
            }
        },

        clear(){      //点击清楚历史记录函数
            localStorage.removeItem('LocalRecords')
            this.localStorage()
        },

        reco(val){    //点击历史记录搜索
            this.inputval = val
            this.search()
        }
    }
}
</script>

<style lang="less" scoped>
.box{
    padding: 15/360*100vw;
    line-height: 30/360*100vw;
    .search{
        padding-top: 5/360*100vw;
        display: flex;
        justify-content: space-between;
        margin-bottom: 20/360*100vw;
        .iconjiantou{
            font-size: 19/360*100vw;
        }
        .one{
            flex: 1;
            display: flex;
            margin: 0 10/360*100vw;
            border: solid 1px #c2c1c1;
            border-radius: 9/360*100vw;
            overflow: hidden;
            input{
                width: 100%;
                height: 30/360*100vw;
                outline: none;
                border: none;
            }
        }
        .txt{
            font-size: 17/360*100vw;
        }
    }
    .sea{
        padding-top: 20/360*100vw;
        .text{
            display: flex;
            span{
                font-size: 16/360*100vw;
                font-weight: bold;
                flex: 1;
            }
            samp{
                color: #afafaf;
                font-size: 12/360*100vw;
            }
        }
        span{
            padding: 0 6/360*100vw;
        }
    }
    .rec{
        background: #f7f4f4;
        display: flex;
        margin: 5/360*100vw 0;
        .recommend{
            flex: 1;
        }
    }
}
</style>